<template>
  <el-table
      :data="tableData"
      style="width: 100%;height:100%"
      size="mini"
      :row-style="rowheight"
      :cell-style="cellheight"
      :header-cell-style="headerCellHeight"
      :header-row-style="headerRowHeight"
      :highlight-current-row="false"
      :lazy="false"
  >
    <el-table-column align="center" prop="one" label="未来1日">
    </el-table-column>
    <el-table-column align="center" prop="two" label="未来2日">
    </el-table-column>
    <el-table-column align="center" prop="three" label="未来3日">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            city: "北京市",
            one: "正北0°",
            two: "正北1°",
            three: "正北2°",
          },
          {
            city: "北京市",
            one: "温度15℃",
            two: "温度16℃",
            three: "温度17℃",
          },
          {
            city: "北京市",
            one: "湿度1",
            two: "湿度2",
            three: "湿度3",
          },
          {
            city: "上海市",
            one: "正北0°",
            two: "正北1°",
            three: "正北2°",
          },
          {
            city: "上海市",
            one: "温度15℃",
            two: "温度16℃",
            three: "温度17℃",
          },
          {
            city: "上海市",
            one: "湿度1",
            two: "湿度2",
            three: "湿度3",
          },
          {
            city: "天津市",
            one: "正北0°",
            two: "正北1°",
            three: "正北2°",
          },
          {
            city: "天津市",
            one: "温度15℃",
            two: "温度16℃",
            three: "温度17℃",
          },
          {
            city: "天津市",
            one: "湿度1",
            two: "湿度2",
            three: "湿度3",
          },
        ],
      };
    },
    methods: {
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 3 === 0) {
            return {
              rowspan: 3,
              colspan: 1,
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0,
            };
          }
        }
      },
      rowheight: () => {
        return {
          height: "1vh",
          padding: "0px !important",
          "background-color": "rgba(19, 63, 88)",
          color: "#ffffff",
        };
      },
      cellheight: () => {
        return {
          height: "1vh",
          padding: "0px !important",
        };
      },
      headerRowHeight: () => {
        return {
          height: "1vh",
          padding: "0px !important",
          "background-color": "rgba(19, 63, 88)",
        };
      },
      headerCellHeight: () => {
        return {
          height: "1vh",
          backgroundColor:"rgba(10, 39, 50)",
          padding: "0px !important",
          color:"#ffffff"
        };
      },
    },
  };
</script>
<style scoped>
.con {
  background-color: blue;
}
</style>
